<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="js/bootstrap.css">
    <script src="js/bootstrapValidator.min.js"></script>
    <link rel="stylesheet" href="js/bootstrapValidator.min.css">

</head>
<body>
<div class="container">
    <form id="myform">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" placeholder="username" name="username">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="psw1">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">确认密码</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" name="psw2">
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" id="email" placeholder="email" name="email">
        </div>
        <div class="form-group">
            <label for="email">手机号码</label>
            <input type="text" class="form-control" id="phone" placeholder="phoneNumber" name="phone">
        </div>

        <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>
</body>
<script>
    $(function () {
        $('#myform').bootstrapValidator({
            message: 'This value is not valid',
            live: 'enabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            submitButtons: 'button[type="submit"]',
            fields: {
                username: {
                    message: '请输入正确的用户名',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 24,
                            message: '用户名长度必须在6到24位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                },
                psw1: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 8,
                            max: 16,
                            message: '用户名长度必须在8到16位之间'
                        },
                    }
                },
                psw2: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        identical: {
                            field: 'psw1',
                            message: '两次输入的密码不相符'
                        }
                    }
                },
                phone: {
                    validators: {
                        notEmpty: {
                            message: '电话号码不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '电话号码为11位'
                        },
                        regexp: {
                            regexp: /^1[3456789][0-9]{9}$/,
                            message: '电话号码格式错误'
                        }
                    }
                }
            }
        });
    });
</script>
</html>